<template>
  <table-row-detail-dialog ref="detailDialog">
    <div class="dialog-body">
      <el-form ref="form" label-width="130px" v-if="itemData">
        <el-form-item
          :label="row.label"
          v-for="(row, index) in formData"
          :key="index"
        >
          <span v-if="row.dictKey">{{
            itemData[row.param] | dictLabel(row.dictKey)
          }}</span>
          <span v-else>{{ itemData[row.param] }}</span>
        </el-form-item>
      </el-form>
    </div>
  </table-row-detail-dialog>
</template>

<script>
import TableRowDetailDialog from '@/components/TableRowDetailDialog/index';
import { detail } from '@/api/system/log';

export default {
  name: 'ItemDetail',
  components: {
    TableRowDetailDialog,
  },
  props: {},
  data() {
    return {
      dialogType: 'detail',
      itemData: null, //详情数据
      formData: [
        { label: '用户', param: 'userName' },
        { label: 'IP地址', param: 'ip' },
        { label: '项目', param: 'project' },
        { label: '接口类', param: 'interfaceClass' },
        { label: '接口方法', param: 'interfaceMethod' },
        { label: '操作描述', param: 'operDescription' },
        { label: '操作结果', param: 'operResult', dictKey: 'result' },
        { label: '执行时间', param: 'startTime' },
        { label: '持续时间（ms）', param: 'duration' },
      ],
    };
  },
  computed: {},
  created() {},
  methods: {
    show(action = 'detail', data) {
      this.dialogType = action;
      this.id = data.id; //todo 更换api后需要修改id字段，每个api的id字段名称都不一样
      this.getDetail();
      this.$refs.detailDialog.show(action);
    },
    hide() {
      this.$refs.detailDialog.hide();
    },

    /**
     * 获取记录详情
     * 填充表单数据对象
     * */
    getDetail() {
      detail(this.id).then((res) => {
        this.itemData = res;
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.dialog-body {
}
</style>
